<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RegisterShape problem</title>
</head>
<body>
<div id="canvas"></div>
<script src="./assets/data-set.min.js"></script>
<script src="../build/g2.js"></script>
<script>
  const {
      Shape
  } = G2;
  const data = [
    { type: 'AE', sold: 179, money: 248 },
    { type: '绑卡', sold: 101, money: 129 }
  ];

  // 定义 shape
  [
    { shape: 'right', offsetX: +20 },
    { shape: 'left', offsetX: -20 },
    { shape: 'bottom', offsetY: +20 },
    { shape: 'top', offsetY: -20 }
  ].forEach(item => {
    Shape.registerShape('interval', item.shape, {
//      getPoints: function(cfg) {
//        var x = cfg.x;
//        var y = cfg.y;
//        var y0 = cfg.y0;
//        var width = cfg.size;
//        return [
//          {x: x-width/2, y: y0},
//          {x: x-width/2, y: y},
//          {x: x+width/2, y: y},
//          {x: x+width/2, y: y0}
//        ]
//      },

      draw(cfg, group) { // 自定义最终绘制
        console.log(cfg);
        const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
        points.forEach(obj => { // 关键：就是把 bar 错位一下
          obj.y += item.offsetY ? item.offsetY : 0;
          obj.x += item.offsetX ? item.offsetX : 0;
        });
        return group.addShape('polygon', { // 将自定义Shape返回
          attrs: {
            points: [
              [ points[0].x, points[0].y ],
              [ points[1].x, points[1].y ],
              [ points[2].x, points[2].y ],
              [ points[3].x, points[3].y ]
            ],
            fill: cfg.color
          }
        });
      }
    });
  });

  const chart = new G2.Chart({
    container: 'canvas',
    forceFit: true,
    height: window.innerHeight
  });

  chart.source(data);
  chart.interval()
    .position('type*sold')
    .shape('left')
    .color('blue')
    .size(30);

  chart.render();
</script>
</body>
</html>
